<template>
	<!-- :disabled="true" 禁用组件-->
	<div class="index">
		<el-form 
		  	ref="ruleForm2" 
		  	label-position="left" 
		  	label-width="0px" 
		  	class="login-container"
		  	:rules="rules"
		  	:model = "ruleForm"
		  	@keyup.enter.native="Submit()"
		  >
			    <h3 class="title">欢迎登录中永物流运输管理平台</h3>
			    <!--账号-->
			    <el-form-item prop="uname">
			    	<i class="iconfont icon-style my-icon-shouji"></i>
			        <el-input 
			        	type="text"  
			        	autocomplete="off" 
			        	placeholder="请输入账号"
			        	maxlength = 20
			        	minlength = 6
			        	v-model="ruleForm.uname"
			        	clearable
			        ></el-input>
			    </el-form-item>
			    <!--密码-->
			    <el-form-item prop="upwd">
			    	<i class="iconfont icon-style my-icon-mima"></i>
			        <el-input 
			        	type="password"  
			        	autocomplete="off" 
			        	placeholder="请输入密码"
			        	maxlength = 12
			        	minlength = 6
			        	v-model="ruleForm.upwd"
			        	clearable
			        ></el-input>
			    </el-form-item>
			    <!--<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>-->
			    <el-form-item style="width:100%;">
			      <el-button 
			    	:plain="true" 
			    	type="primary" 
			      	style="width:100%;" 
			      	:loading="logining"
			      	@click="Submit"
			      >登录</el-button>
			    </el-form-item>
		</el-form>
		<div class="login-app" style="display:none;">
				<div class="login-app-item login-app-ios">
					<span class="text">移动端APP下载</span>
					<div class="qr-code">
						<div class="qr-code-inner">
							<div class="qr-code-item">
								<img class="qr-img" src="">
								<p class="qr-text">扫描下载CTM移动版APP</p>
							</div>
							<div class="qr-code-item">
								<img class="qr-img" src="">
								<p class="qr-text">扫描下载CTM司机版APP</p>
							</div>
						</div>
					</div>
				</div>
	    </div>
	</div>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		name:"Login",
		data(){
			return {
				logining:false,
				ruleForm: {
		          uname:'',  //账号
		          upwd:'',   //密码
				  type:''
		        },
				rules: {
		          uname: [
		            { required: true, message: '请输入账号', trigger: 'blur' },
		          ],
		          upwd: [
		            { required: true, message: '请输入密码', trigger: 'blur' },
		          ]
		        },
		        timer: null
			}
		},
		methods:{
		  Submit(){
		  	const _this = this
			  
		  	//邮箱验证
		  	// const emailReg = /^([A-Za-z]{7}|[A-Za-z]{7}(.+@?(.*?)\.(com|cn|net)(\.cn)?))$/
			  const Regular = /^((.*@.*\.(com|cn|net)(\.cn)?)|(1[3-8]\d{9}))$/
			  const emailReg = /^(.*@.*\.(com|cn|net)(\.cn)?)$/
			  const PhoneReg = /^(1[3-8]\d{9})$/
		  	// //密码验证
		  	// const upwdReg = /^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])).{6,12}$/
		  	if( Regular.test(_this.ruleForm.uname)){
				  if( PhoneReg.test(_this.ruleForm.uname)){
					  _this.ruleForm.type=1
				  }else{
					  _this.ruleForm.type=2
				  }
				  console.log(_this.ruleForm.uname);
			  	  console.log(_this.ruleForm.upwd);
					console.log(_this.ruleForm.type);
		  		if(_this.timer){
				  	clearTimeout(_this.timer)
				 }
				 _this.timer = setTimeout(()=>{
				    let qs = require('qs')
					let getDate = _this.common.getTimer()
					this.axios.post(`${this.baseURL}/user/login`,
						 qs.stringify({
						   type : _this.ruleForm.type,
						   param : _this.ruleForm.uname,
						   userPassword : _this.ruleForm.upwd
						 })
					).then(res => {
						console.log(res.data)
						 let state = res.data
						 let sdataDa=res.data.data
						 if(state.status == 200 ){
							 let sdata = state.data.userRole;
							 if(sdataDa.roleId== 1){
								_this.getSucceed()
								let code = encodeURI(sdataDa.userName)
								if(code=="null"){
									//sdataDa.userName="中永物流"
									code="中永物流"
								}
								sessionStorage.setItem('id',JSON.stringify(sdataDa.id))
								sessionStorage.setItem('user',JSON.stringify(code))
							//	sessionStorage.setItem('token',state.token)
								_this.changeUser(code)
								_this.$router.push({ path: '/' })
							 }
						 }else{
						 	_this.getError()
						 }
					})
				  },600)
		  	}else{
		  		this.getError()
		  	}
		  },
//		  getTimer(setTimer){
//		  	 let date = setTimer ? new Date(setTimer) : new Date()
//		  	 var y = date.getFullYear()   //年
//		  	 var m = date.getMonth() + 1  //月
//		  	 m = m < 10 ? ('0' + m) : m; 
//		  	 var d = date.getDate()     //日
//		  	 d = d < 10 ? ('0' + d) : d   
//		  	 var h = date.getHours()    //时
//           h = h < 10 ? ('0' + h) : h  
//           var minute = date.getMinutes();    
//  		 var second = date.getSeconds();
//		  	 const newDate = y+"-"+m+"-"+d+" "+h+":"+minute+":"+second
//		  	 return newDate
//		  },
		  getError(){
		  	  return this.$message({
				         showClose: true,
				         message: '账号密码错误',
				         type: 'error'
				  })
		  },
		  getSucceed(){
		  	  return this.$message({
					      showClose: true,
					      message: '登录成功,正在加载~~',
					      type: 'success'
				  })
		  },
		  ...mapMutations(['changeUser'])
		}
	}
</script>

<style scoped>
.login-container >>> .el-input__inner{
	padding-left:0.8rem;
}
.index{
	width:100%;
	height:100%;
	position: relative;
}
.login-container {
    border-radius: 0.1rem;
    margin:0 auto;
    width: 7rem;
    padding: 0.7rem 0.7rem 0.3rem 0.7rem;
    background: #fff;
    border: .02rem solid #eaeaea;
    box-shadow: 0 0 0.5rem #cac6c6; 
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-80%);
  }
.title {
      margin: 0 auto .4rem auto;
      text-align: center;
      color: #505458;
      font-size:.32rem;
    }
.remember {
      margin: 0 0 .7rem 0;
    }
.icon-style{
	color: #999;
    position: absolute;
    left: 0;
    z-index: 1;
    font-size: 0.36rem;
    display: block;
    width:0.8rem;
    line-height:0.85rem;
    text-align: center;  
}
/*二维码样式*/
.login-app{
    position:relative;
}
.login-app .login-app-item {
	text-align: center;
}
.login-app .login-app-item .text{
	font-size:0.32rem;
}
.qr-code{
	position:absolute;
	top:.9rem;
    left:50%;
    margin-left:-3rem;
    width:6rem;
    background:#fff;
    padding:0.12rem;
    border:1px solid #999;
    border-radius: .1rem;
}
.qr-code-inner{
	display: flex;
	justify-content: space-between;
}
.qr-code-item{
	width:2.88rem;
	float:left;
}
.qr-img{
	width:100%;
	height:2.8rem;
}
.qr-text{
	margin-top:.2rem;
}
 .qr-code-inner:before {
    content: '';
    position: absolute;
    left:50%;
    top:-.3rem;
    margin-left:-15px;
    border-left: 0.3rem solid transparent;
    border-right: 0.3rem solid transparent;
    border-bottom: 0.3rem solid #999;
}
</style>